<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML DOM - Scroll to an element smoothly</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="/css/demo.css" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Inter&family=Source+Code+Pro&display=swap"
        />
        <style>
            .navigation {
                /* Fixed position */
                left: 0;
                position: fixed;
                top: 50%;
                transform: translate(0px, -50%);

                /* Center the content */
                display: flex;
                flex-direction: column;
                justify-content: center;

                /* Misc */
                padding: 1rem;
            }
            .navigation__item {
                /* Make it like circle */
                border-radius: 9999px;
                height: 0.75rem;
                width: 0.75rem;

                border: 1px solid #cbd5e0;
                margin: 0.25rem 0;
            }
            .navigation__item--selected {
                background-color: #cbd5e0;
            }
            .section {
                height: 100vh;
                width: 100%;

                /* Center the content */
                align-items: center;
                display: flex;
                justify-content: center;

                /* Misc */
                border-bottom: 1px solid #cbd5e0;
                font-size: 2.25rem;
            }
            .section:last-child {
                border-bottom-color: transparent;
            }
        </style>
    </head>
    <body style="height: 32rem; overflow: auto">
        <!-- Navigation -->
        <div class="navigation">
            <a href="#section-1" class="navigation__item navigation__item--selected"></a>
            <a href="#section-2" class="navigation__item"></a>
            <a href="#section-3" class="navigation__item"></a>
            <a href="#section-4" class="navigation__item"></a>
        </div>

        <div id="section-1" class="section">1</div>
        <div id="section-2" class="section">2</div>
        <div id="section-3" class="section">3</div>
        <div id="section-4" class="section">4</div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const duration = 800;

                const scrollToTarget = function (target) {
                    const top = target.getBoundingClientRect().top;
                    const startPos = window.pageYOffset;
                    const diff = top;

                    let startTime = null;
                    let requestId;

                    const loop = function (currentTime) {
                        if (!startTime) {
                            startTime = currentTime;
                        }

                        // Elapsed time in miliseconds
                        const time = currentTime - startTime;

                        const percent = Math.min(time / duration, 1);
                        const easeInQuad = function (t) {
                            return t * t;
                        };
                        window.scrollTo(0, startPos + diff * percent);

                        if (time < duration) {
                            // Continue moving
                            requestId = window.requestAnimationFrame(loop);
                        } else {
                            window.cancelAnimationFrame(requestId);
                        }
                    };
                    requestId = window.requestAnimationFrame(loop);
                };

                const triggers = [].slice.call(document.querySelectorAll('.navigation__item'));
                let activeTriggerEle = triggers.length === 0 ? null : triggers[0];

                const clickHandler = function (e) {
                    // Prevent the default action
                    e.preventDefault();

                    // Get the `href` attribute
                    const href = e.target.getAttribute('href');
                    const id = href.substr(1);
                    const target = document.getElementById(id);

                    activeTriggerEle && activeTriggerEle.classList.remove('navigation__item--selected');
                    activeTriggerEle = e.target;
                    activeTriggerEle.classList.add('navigation__item--selected');

                    scrollToTarget(target);
                };

                triggers.forEach(function (ele) {
                    ele.addEventListener('click', clickHandler);
                });
            });
        </script>
    </body>
</html>
